<template>
  <div>
    <div class="analysisGeneration-title">
      <span></span>
      <label>form配置</label>
      <div class="s"></div>
      <template>
        <div class="n" @click="addButClick">
          <i class="el-icon-edit"></i>
          添加form表单
        </div>
      </template>
    </div>
    <div class="analysisGeneration-design-api-content">
      <el-table ref="table" :data="propsData.formProp.contentArray" border style="width: 100%" :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}">
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="表单名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="name"/>
        <el-table-column label="表单属性" min-width="150" :show-overflow-tooltip="true" align="center" prop="type">
          <template slot-scope="scope">
            <template v-for="item in $store.state.formTypeOption">
              <template v-if="scope.row.type==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="回显api" min-width="150" :show-overflow-tooltip="true" align="center" prop="echoApi">
          <template slot-scope="scope">
            <template v-for="item in propsData.apiProp.apiArray2">
              <template v-if="scope.row.echoApi==item.notes">
                {{ item.notes }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="提交api" min-width="150" :show-overflow-tooltip="true" align="center" prop="submitApi">
          <template slot-scope="scope">
            <template v-for="item in propsData.apiProp.apiArray2">
              <template v-if="scope.row.submitApi==item.notes">
                {{ item.notes }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="回显参数" min-width="150" :show-overflow-tooltip="true" align="center" prop="params"/>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="editClick(scope.row,scope.$index)">编辑</el-button>
            <el-button type="warning" icon="el-icon-view el-icon--left" @click="fieldSeeClick(scope.row,scope.$index)">字段查看</el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delClick(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--新增form按钮dialog-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        :title="dialogData.title"
        :visible.sync="dialogData.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="dialogDataClose"
        width="600px"
    >
      <el-form :model="dialogData.formData" ref="api-form" class="analysisGeneration-form-dialog">
        <el-form-item label="表单名称" prop="name" class="s" :rules="[{ required: true, message: '请输入表单名称', trigger: 'blur' }]">
          <el-input v-model="dialogData.formData.name" placeholder="请输入表单名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="表单属性" prop="type" class="s" :rules="[{ required: true, message: '请选择表单属性', trigger: 'blur' }]">
          <el-select v-model="dialogData.formData.type" placeholder="请选择表单属性" clearable>
            <el-option
                v-for="item in $store.state.formTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回显api" prop="echoApi" class="s" :rules="[]"
                      v-if="['回显','回显并提交'].includes(dialogData.formData.type)">
          <el-select v-model="dialogData.formData.echoApi" placeholder="请选择回显api" clearable>
            <el-option
                v-for="item in propsData.apiProp.apiArray2"
                :key="item.notes"
                :label="item.notes"
                :value="item.notes">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交api" prop="submitApi" class="s" :rules="[{ required: true, message: '请选择提交api', trigger: 'blur' }]"
                      v-if="['提交','回显并提交'].includes(dialogData.formData.type)">
          <el-select v-model="dialogData.formData.submitApi" placeholder="请选择提交api" clearable>
            <el-option
                v-for="item in propsData.apiProp.apiArray2"
                :key="item.notes"
                :label="item.notes"
                :value="item.notes">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回显参数" prop="name" class="s" :rules="[]" v-if="['回显','提交','回显并提交'].includes(dialogData.formData.type)">
          <el-input v-model="dialogData.formData.params" placeholder="用,号隔开，自动获取row的参数" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDataClose">取 消</el-button>
        <el-button type="primary" @click="dialogDataSub">确 定</el-button>
      </div>

    </el-dialog>

    <!--字段dialog-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        :title="fieldDialog.title"
        :visible.sync="fieldDialog.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="formDataClose"
        width="1500px"
        top="15px"
    >
      <div>
        <el-button type="primary" @click="addFormField">添加字段</el-button>
        <el-button type="warning" @click="dataValidationClick">form字段验证</el-button>
      </div>
      <el-table ref="table" :data="fieldDialog.fieldArray" border style="width: 100%;margin-top: 15px"
                :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}" :default-sort = "{prop: 'sort', order: 'ascending'}"
                max-height="760px"
      >
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="名称" width="170" :show-overflow-tooltip="true" align="center" prop="name">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入名称" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column label="数据类型" width="160" :show-overflow-tooltip="true" align="center" prop="name">
          <template slot-scope="scope">
            <el-select v-model="scope.row.type" placeholder="请选择数据类型">
              <el-option
                  v-for="item in $store.state.formFieldOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="字段相关配置" min-width="630" align="center" prop="field">
          <template slot-scope="scope">
            <ul class="design-table-ul">
              <li>
                <template v-if="!['导入按钮','导出按钮'].includes(scope.row.type)">
                  <span>字段</span>
                  <el-input v-model="scope.row.field" placeholder="字段"></el-input>
                </template>
                <template v-if="['导入按钮','导出按钮'].includes(scope.row.type)">
                  <span>按钮名称</span>
                  <el-input v-model="scope.row.butName" placeholder="按钮名称"></el-input>
                  <span>导出/导出接口</span>
                  <el-input v-model="scope.row.exportInterface" placeholder="导出/导出接口"></el-input>
                </template>
                <template v-if="['日期和时间范围','日期范围','月份范围'].includes(scope.row.type)">
                  <span>开始字段</span>
                  <el-input v-model="scope.row.startField" placeholder="开始字段"></el-input>
                  <span>结束字段</span>
                  <el-input v-model="scope.row.endField" placeholder="结束字段"></el-input>
                </template>
                <template v-if="['文件上传','图片上传'].includes(scope.row.type)">
                  <span>是否多文件</span>
                  <el-checkbox v-model="scope.row.singleFile"></el-checkbox>
                </template>

                <template v-if="['单选框','多选框','下拉框'].includes(scope.row.type)">
                  <span>数据来源</span>
                  <el-select v-model="scope.row.selectProp.dataSources" placeholder="数据来源" style="width: 150px;flex: 0 0 auto">
                    <el-option
                        v-for="item in $store.state.formSelectOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </li>

              <li v-if="['单选框','多选框','下拉框'].includes(scope.row.type)" class="mt-12">
                <template v-if="scope.row.selectProp.dataSources=='别的页面接口'">
                  <span>接口名称</span>
                  <el-input v-model="scope.row.selectProp.interfaceName" placeholder="接口名称"></el-input>
                  <span>label字段</span>
                  <el-input v-model="scope.row.selectProp.labelField" placeholder="label字段"></el-input>
                  <span>value字段</span>
                  <el-input v-model="scope.row.selectProp.valueField" placeholder="label字段"></el-input>
                </template>
                <template v-if="scope.row.selectProp.dataSources=='本页面接口'">
                  <span>选择接口</span>
                  <el-select v-model="scope.row.selectProp.interfaceName" placeholder="选择接口" style="width: 150px;flex: 0 0 auto">
                    <el-option
                        v-for="item in propsData.apiProp.apiArray2"
                        :key="item.notes"
                        :label="item.notes"
                        :value="item.notes">
                    </el-option>
                  </el-select>
                  <span>label字段</span>
                  <el-input v-model="scope.row.selectProp.labelField" placeholder="label字段"></el-input>
                  <span>value字段</span>
                  <el-input v-model="scope.row.selectProp.valueField" placeholder="label字段"></el-input>
                </template>
                <template v-if="scope.row.selectProp.dataSources=='自定义'">
                  <el-input type="textarea" placeholder="请输入我是文本域" v-model="scope.row.selectProp.text" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30000" show-word-limit/>
                </template>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" width="70" align="center" prop="required">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.required"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="不可更改" width="70" align="center" prop="required">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.display"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="row数据" width="70" align="center" prop="required">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.rowData"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="80" :show-overflow-tooltip="true" align="center" sortable prop="sort" :sort-method="(a,b)=>{return a.sort - b.sort}">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" placeholder="排序"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="formDelClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {
      //字段设置
      fieldDialog: {
        title: '字段设置',
        isDialog: false,
        fieldArray: []
      },

      //新增form表单dialog
      dialogData: {
        title: '新增form表单',
        isDialog: false,
        formData: {
          id: '',
          name: '',//表单名称
          type: '回显',//表单属性
          echoApi: '',//回显api
          submitApi: '',//提交api
          params: '',//回显参数  用,号隔开，自动获取row的参数
          dataParsing: '',//数据解析
          fieldArray: [], //字段数组
        },
      },

    };
  },
  mounted() {
  },
  methods: {
    //删除字段
    formDelClick(row) {
      for (let i = 0; i < this.fieldDialog.fieldArray.length; i++) {
        if (this.fieldDialog.fieldArray[i] == row) {
          this.fieldDialog.fieldArray.splice(i, 1);
          return false
        }
      }
    },
    //添加字段
    addFormField() {
      let jsonData = {
        id: new Date().getTime(),
        name: '',//名称
        type: '输入框',//数据类型
        field: '',//字段
        startField: 'beginTime',//开始字段 时间范围
        endField: 'endTime',//结束字段 时间范围
        exportInterface: '/api/import.do/export.do',//导出或导入接口
        butName: '导入/导出',//导出或导入按钮名称
        required: true,//是否必填 true 必填
        display: false,//不可更改  true 不可更改
        rowData: false,//是否row数据 true 是
        singleFile: true,//文件上传和图片是否多个文件  true 多个
        sort: '10',//排序
        //单选框-下拉框-多选框 数据来源
        selectProp: {
          dataSources: '自定义',//单选框-下拉框-多选框 数据来源
          interfaceName: '',// 单选框-下拉框-多选框 本页或已有接口 接口名称
          labelField: '',//label字段
          valueField: '',//value字段
          //自定义 下拉框
          text: `{label:'',value:''},`,
        }
      }
      this.fieldDialog.fieldArray.push(jsonData);
    },
    //form字段验证
    dataValidationClick() {
      console.log(this.fieldDialog.fieldArray)
      for (let i = 0; i < this.fieldDialog.fieldArray.length; i++) {
        if (this.fieldDialog.fieldArray[i].name == '') {
          this.$message.error(`${i + 1}---名称不能为空`);
          return false
        }
        if (!['导入按钮', '导出按钮'].includes(this.fieldDialog.fieldArray[i].type)) {
          if (this.fieldDialog.fieldArray[i].field == '') {
            this.$message.error(`${i + 1}---字段不能为空`);
            return false
          }
        }
        if (['导入按钮', '导出按钮'].includes(this.fieldDialog.fieldArray[i].type)) {
          if (this.fieldDialog.fieldArray[i].butName== '') {
            this.$message.error(`${i + 1}---导出或导入按钮名称不能为空`);
            return false
          }
          if (this.fieldDialog.fieldArray[i].exportInterface.substring(0, 1) != '/') {
            this.$message.error(`${i + 1}---导出或导入接口请求地址要以/开头`);
            return false
          }
        }
        if (['日期和时间范围', '日期范围', '月份范围'].includes(this.fieldDialog.fieldArray[i].type)) {
          if (this.fieldDialog.fieldArray[i].startField == '') {
            this.$message.error(`${i + 1}---开始字段不能为空`);
            return false
          }
          if (this.fieldDialog.fieldArray[i].endField == '') {
            this.$message.error(`${i + 1}---结束字段不能为空`);
            return false
          }
        }
        if (['单选框', '多选框', '下拉框'].includes(this.fieldDialog.fieldArray[i].type)) {
          if (['别的页面接口', '本页面接口'].includes(this.fieldDialog.fieldArray[i].selectProp.dataSources)) {
            if (this.fieldDialog.fieldArray[i].selectProp.interfaceName == '') {
              this.$message.error(`${i + 1}---接口名称不能为空`);
              return false
            }
            if (this.fieldDialog.fieldArray[i].selectProp.labelField == '') {
              this.$message.error(`${i + 1}---label字段不能为空`);
              return false
            }
            if (this.fieldDialog.fieldArray[i].selectProp.valueField == '') {
              this.$message.error(`${i + 1}---value字段不能为空`);
              return false
            }
          }
        }
        let num = 0;
        for (let j = 0; j < this.fieldDialog.fieldArray.length; j++) {
          if (this.fieldDialog.fieldArray[i].field == this.fieldDialog.fieldArray[j].field) {
            num = num + 1;
          }
        }
        if (num > 1) {
          this.$message.error(`${i + 1}---字段不能重复`);
          return false
        }
        this.$message.success(`form字段暂无错误`);
      }
    },
    //字段查看
    fieldSeeClick(row) {
      this.fieldDialog.title = `${row.name} 字段设置`
      this.fieldDialog.isDialog = true;
      this.fieldDialog.fieldArray = row.fieldArray;
    },

    //字段设置dialog
    formDataClose() {
      this.fieldDialog = this.$options.data().fieldDialog;
    },

    //新增接口
    addButClick() {
      this.dialogData.title = '新增form表单';
      this.dialogData.isDialog = true;
    },
    //编辑
    editClick(row, key) {
      this.dialogData.title = '编辑form表单';
      let jsonData = JSON.parse(JSON.stringify(row))
      this.dialogData.formData = jsonData;
      this.dialogData.formData.id = key;
      this.dialogData.isDialog = true;
    },
    //删除
    delClick(key) {
      this.propsData.formProp.contentArray.splice(key, 1)
    },
    //确定
    dialogDataSub() {
      this.$refs['api-form'].validate((valid) => {
        if (valid) {
          if (this.dialogData.formData.id !== '') {
            //改
            let butArray = JSON.parse(JSON.stringify(this.propsData.formProp.contentArray));
            butArray.splice(this.dialogData.formData.id, 1); //先删了
            let num = 0;
            for (let i = 0; i < butArray.length; i++) {
              if (butArray[i].name == this.dialogData.formData.name) {
                num = num + 1
              }
            }
            if (num > 0) {
              this.$message.error('表单名称重复');
              return false
            } else {
              this.propsData.formProp.contentArray[this.dialogData.formData.id] = this.dialogData.formData;
              this.$store.state.randomKey = this.Utils.createRandomKey();
            }
          } else {
            //增
            for (let i = 0; i < this.propsData.formProp.contentArray.length; i++) {
              if (this.propsData.formProp.contentArray[i].name == this.dialogData.formData.name) {
                this.$message.error(`表单名称重复`);
                return false
              }
            }
            this.propsData.formProp.contentArray.push(this.dialogData.formData);
          }

          this.dialogDataClose();
        }
      })
    },
    //取消
    dialogDataClose() {
      this.dialogData = this.$options.data().dialogData;
    },
  },
};
</script>

<style lang="scss" scoped></style>
